<template>
  <div class="classDetails_container">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="left">
        <div class="left_item">
          <div class="details_title">
            {{name}}
          </div>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="章节目录" name="first">
              <div class="classList">
                <ul class="newItem chapterItem">
                  <li v-for="(item,index) in chapterList" :key="item.id" @click="leftItemClick(item,index)" :class="[selectIndex===index?'active':'']">
                    <p class="content">
                      <i class="circle"></i>
                      {{item.chapterName }}
                    </p>
                  </li>

                </ul>
              </div>

            </el-tab-pane>
            <el-tab-pane label="练习" name="second">
              <div class="practise">
                <img src="/assets/image/class_text_img_1@2x.png" alt="">
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
        <div class="right_item" v-show="index==0">
          <div class="rightContent">
            <video v-if="resourceType==3" class="video-js" id="myVideo" controls="controls" ref="video" preload="preload" objectFit="contain" autoplay="autoplay">
              <source v-bind:src="resourceUrl" type="video/mp4">
            </video>
            <audio v-if="resourceType==2" :src="resourceUrl" autoplay="autoplay" ref="audio" controls="controls"></audio>

            <div v-show="resourceType==1">
              <div class="pageInfo">
                <div style="marginTop: 10px;color #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>

                <el-button-group>
                  <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
                  <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
              </div>

              <pdf ref="pdf" :src="resourceUrl" class="pdf" :page="pageNum" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event"></pdf>
              <div v-loading="loading" v-show="loadedRatio==0" element-loading-text="内容加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="width: 100%">
              </div>
            </div>
          </div>
        </div>

        <div class="right_item" v-show="index==1">
          <div class="practice">
            <div v-if="examItem.content">
              <p class="total">
                {{position+1}}/{{length}}
              </p>
              <span class="questionType">
                单选题
              </span>

              <div class="question_title">{{examItem.content.question}}</div>

              <ul class="answerList">
                <li @click="optionClick(1)" :class="examItem.state.flag1==1?'right':examItem.state.flag1==2?'wrong':'default'">
                  {{examItem.content.option1}}
                </li>
                <li @click="optionClick(2)" :class="examItem.state.flag2==1?'right':examItem.state.flag2==2?'wrong':'default'">
                  {{examItem.content.option2}}
                </li>

                <li @click="optionClick(3)" :class="examItem.state.flag3==1?'right':examItem.state.flag3==2?'wrong':'default'">
                  {{examItem.content.option3}}
                </li>

                <li @click="optionClick(4)" :class="examItem.state.flag4==1?'right':examItem.state.flag4==2?'wrong':'default'">
                  {{examItem.content.option4}}
                </li>

                <div class="analysis" v-if="isAnalysis">{{examItem.content.answerAnalysis}}</div>

              </ul>

              <div class="btnList">
                <button @click="lastExercise()">上一题</button>
                <button @click="analysisClick()">答案解析</button>
                <button @click="nextExercise()">下一题</button>
              </div>
            </div>
            <div class="nodata" v-if="!examItem.content">
              暂无练习题~
            </div>

          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import path from '@/network'
import pdf from 'vue-pdf'
export default {
  name: 'App',
  components: {
    pdf,
  },
  data () {
    return {
      activeName: 'first',
      id: this.$route.query.id,
      total: 0,
      pagesize: 10,
      currentPage: 1,
      exerciseList: [],
      chapterList: [],
      exerciseData: null,
      examItem: {
        content: '',
        state: {
          flag1: 0,
          flag2: 0,
          flag3: 0,
          flag4: 0,
        },
        question: '',
      },
      position: 0,
      isAnalysis: false,
      optionCanClick: true,
      length: 0,
      //resourceUrl: 'https://cdn2.pluslegal.cn/test.pdf',
      resourceUrl: '',
      resourceType: '',
      Info: '',
      index: 0,
      selectIndex: 0,
      name: this.$route.query.name,
      flag: true,

      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
      loading: true
    };
  },
  created () {
  },
  mounted () {
    this.getChapterList(this.$route.query.id);
    this.getExerciseList(this.$route.query.id);
    this.currentPage = 1;
  },

  methods: {
    prePage () {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage () {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },

    handleClick (tab) {
      this.index = tab.index
    },

    leftItemClick (item, index) {
      this.resourceType = item.resourceType
      this.restResoure()
      this.Info = item.title;
      this.resourceUrl = item.resourceUrl;
      this.selectIndex = index;
      var _this = this;

      if (_this.resourceType == 3) {
        let vdo = document.getElementById('myVideo');
        vdo.src = item.resourceUrl
        vdo.play();
      }
      if (_this.resourceType == 2) {
        let audio = document.getElementById('myAudio');
        audio.src = item.resourceUrl
        audio.play();
      }

    },

    restResoure () {
      // 每次切换点击时关闭正在播放的语音视频
      let mp3 = document.getElementById('myAudio');
      if (mp3) {
        mp3.pause()
      }

      let vdo = document.getElementById('myVideo');
      if (vdo) {
        vdo.pause()
      }

      this.pageNum = 1;
      this.pageTotalNum = 1
    },

    //获取list
    getChapterList (id) {
      path.getChapterList(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          this.chapterList = res.rows
          console.log(JSON.stringify(this.chapterList))
          if (res.rows[0].resourceUrl) {
            //默认显示列表第一条
            this.resourceUrl = res.rows[0].resourceUrl
            this.resourceType = res.rows[0].resourceType

          }
        }
      })
    },
    //获取list
    getExerciseList (id) {
      path.getExerciseList(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          if (res.rows.length > 0) {
            this.exerciseData = res.rows
            this.length = res.rows.length
            this.examItem = {
              content: res.rows[this.position],
              state: {
                flag1: 0,
                flag2: 0,
                flag3: 0,
                flag4: 0,
              }
            }

          }
        }
      })
    },


    analysisClick () {
      this.isAnalysis = !this.isAnalysis
    },



    lastExercise () {
      this.optionCanClick = true,
        this.isAnalysis = false;
      this.position--;
      if (this.position >= 0) {

        this.examItem = {
          content: this.exerciseData[this.position],
          state: {
            flag1: 0,
            flag2: 0,
            flag3: 0,
            flag4: 0,
          }
        }

      } else {
        this.position = 0
        this.$message({
          message: '当前是第一题！',
          type: 'error'
        });
        return
      }
    },

    nextExercise: function () {
      this.optionCanClick = true,
        this.isAnalysis = false
      this.position++;
      if (this.position < this.length) {
        this.examItem = {
          content: this.exerciseData[this.position],
          state: {
            flag1: 0,
            flag2: 0,
            flag3: 0,
            flag4: 0,
          }
        }

      } else {
        console.log(this.position)
        this.position--;
        this.$message({
          message: '已经是最后一题',
          type: 'error'
        });
      }
    },


    //选项点击事件
    optionClick (e) {
      let pos = e;
      let correct = this.examItem.content.correct
      if (this.optionCanClick) {

        this.optionCanClick = false
        if (correct == pos) {
          switch (pos + '') {
            case '1':
              this.examItem.state.flag1 = 1
              break
            case '2':
              this.examItem.state.flag2 = 1
              break
            case '3':
              this.examItem.state.flag3 = 1
              break
            case '4':
              this.examItem.state.flag4 = 1
              break
          }
        } else {
          switch (pos + '') {
            case '1':
              this.examItem.state.flag1 = 2

              break
            case '2':
              this.examItem.state.flag2 = 2

              break
            case '3':
              this.examItem.state.flag3 = 2

              break
            case '4':
              this.examItem.state.flag4 = 2

              break
          }

          switch (correct + '') {
            case '1':
              this.examItem.state.flag1 = 1

              break
            case '2':
              this.examItem.state.flag2 = 1
              break
            case '3':
              this.examItem.state.flag3 = 1

              break
            case '4':
              this.examItem.state.flag4 = 1

              break
          }

          // console.log("examItem", JSON.stringify(this.examItem))
        }
      }
    },
  }
}

</script>